<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width:400px;height: 110px;margin: 0 auto;position: relative;}

    .box .imgbox{width: 2000px;position: absolute;left:0;}
    .box .imgbox img{width: 400px;height: 110px;float: left;}
    
    .box .btns input{position: absolute;width: 20px;height: 20px;top: 45px;padding:0;font-size: 12px;}
    .box .btns .left{left:0}
    .box .btns .right{right:0}
  </style>
</head>
<body>
  <div class="box banner1">
    <div class="imgbox">
      <img src="./imgs/banner1.jpg" alt="">
      <img src="./imgs/banner2.jpg" alt="">
      <img src="./imgs/banner3.jpg" alt="">
      <img src="./imgs/banner4.jpg" alt="">
      <img src="./imgs/banner5.jpg" alt="">
    </div>
    <div class="btns">
      <input type="button" value="左" class="left">
      <input type="button" value="右" class="right">
    </div>
  </div>
  <br>
  <div class="box banner2">
    <div class="imgbox">
      <img src="./imgs/banner1.jpg" alt="">
      <img src="./imgs/banner2.jpg" alt="">
      <img src="./imgs/banner3.jpg" alt="">
      <img src="./imgs/banner4.jpg" alt="">
      <img src="./imgs/banner5.jpg" alt="">
    </div>
    <div class="btns">
      <input type="button" value="左" class="left">
      <input type="button" value="右" class="right">
    </div>
  </div>
</script>
<script src="../move.js"></script>
<script>

  // 分析：轮播图，点击左右按钮，依次改变容器的位置

  // 1. 选择器选择元素
  // 2. 绑定点击事件
    // 3. 计算索引
    // 4. 根据索引设置left

  // 设计：
  // function banner({ele, index=0}){
  //   // 根据传入的ele容器，获取指定元素
  //   // 根据参数，接收默认索引
  //   // 执行绑定事件
  //   this.addEvent();
  // }
  // banner.prototype.addEvent = function(){
  //   // 绑定事件
  //     // 执行计算索引
  //     this.changeIndex();
  // }
  // banner.prototype.changeIndex = function(){
  //   // 计算索引
  //   // ...
  //   // 执行根据索引设置left
  //   this.changeImg();
  // }
  // banner.prototype.changeImg = function(){
  //   // 根据索引设置left
  // }
  // const banner1 = document.querySelector(".banner1");
  // // 执行轮播图，并传入当前轮播图配置
  // new banner({
  //   ele: banner1,
  //   index: 0
  // });

  // 编程：
  function banner({ele, index=0}){
    // 根据传入的ele容器，获取指定元素
    this.left = ele.querySelector(".left")
    this.right = ele.querySelector(".right")
    this.imgbox = ele.querySelector(".imgbox")
    this.imgs = this.imgbox.children;
    // 根据参数，接收默认索引
    this.index = index;

    // 执行绑定事件
    this.addEvent();
  }
  banner.prototype.addEvent = function(){
    const that = this;
    // 绑定事件
    this.left.onclick = function(){
      // 执行计算索引
      that.changeIndex("l");
    }
    this.right.onclick = function(){
      // 执行计算索引
      that.changeIndex("r");
    }
  }
  banner.prototype.changeIndex = function(d){
    // 计算索引
    if(d === "l"){
      if(this.index === 0){
        this.index = this.imgs.length-1
      }else{
        this.index--;
      }
    }else if(d === "r"){
      if(this.index === this.imgs.length-1){
        this.index = 0;
      }else{
        this.index++;
      }
    }
    // 执行根据索引设置left
    this.changeImg();
  }
  banner.prototype.changeImg = function(){
    // 根据索引设置left
    move(this.imgbox, {
      left: -this.index * this.imgs[0].offsetWidth
    })
  }

  const banner1 = document.querySelector(".banner1");
  // 执行轮播图，并传入当前轮播图配置
  new banner({
    ele: banner1,
    index: 0
  });

  const banner2 = document.querySelector(".banner2");
  // 执行轮播图，并传入当前轮播图配置
  new banner({
    ele: banner2,
    index: 0
  });

</script>
</html>